import AigcEchart from '@/components/AigcEchart'
import AigcIcon from '@/components/AigcIcon'
import { dateToString, generateUUid } from '@/utils'
import { Card, List, Table, TableProps } from 'antd'
import { Fragment, useEffect, useState } from 'react'
import ReactSeamlessScroll from 'react-seamless-scroll'
import homeModule from './home.module.scss'
const lineOption: echarts.EChartsOption = {
  grid: {
    top: 50,
    left: 50,
    right: 50,
    bottom: 50
  },
  legend: {
    top: 0,
    bottom: 0,
    padding: 0
  },
  title: {
    show: false,
    text: 'Chart Title',
    textAlign: 'center',
    textStyle: {
      position: 'insideTop'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
}
const pieOption: echarts.EChartsOption = {
  title: {
    show: false,
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '99%',
      data: [
        { value: 1048, name: '越狱' },
        { value: 735, name: '提示泄露' },
        { value: 580, name: '目标劫持' },
        { value: 484, name: 'xss' },
        { value: 300, name: 'cross' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
const safeLogData = () => {
  const arr: any[] = []
  for (let i = 0; i < 10; i++) {
    arr.push({
      outPut: '攻击' + i + generateUUid(),
      inPut: '防御' + i + generateUUid(),
      createDate: dateToString(new Date(), 'YYYY-MM-DD HH:MM:ss')
    })
  }
  return arr
}
export default function Home() {
  const [lineOp, setLineOp] = useState<echarts.EChartsOption>(lineOption)
  const [pieOp, setPieOp] = useState<echarts.EChartsOption>(pieOption)
  const [safelog, setSafeLog] = useState(safeLogData())
  useEffect(() => {
    setLineOp((state) => state)
    setPieOp((state) => state)
    setSafeLog((state) => state)
  }, [])
  return (
    <>
      <Card>
        <AigcEchart className="h-[27vh]" option={lineOp}></AigcEchart>
      </Card>
      <div className="flex space-x-[1%] justify-center mt-[12px]">
        <Card className=" w-[49%]">
          <AigcEchart className="h-[24vh]" option={pieOp}></AigcEchart>
        </Card>
        <Card className=" w-[49%]">
          <AigcEchart className="h-[24vh]" option={pieOp}></AigcEchart>
        </Card>
      </div>
      <div>
        <Card className="mt-[12px]">
          <Fragment>
            <ReactSeamlessScroll
              className="h-[24vh]"
              style={{ width: '100%', height: '24vh' }}
              key={generateUUid()}
            >
              <List
                key={generateUUid()}
                pagination={false}
                dataSource={safelog}
                renderItem={(item, index) => (
                  <div
                    key={generateUUid()}
                    className={homeModule.logitem + ' flex justify-center'}
                  >
                    <AigcIcon
                      className={homeModule.curr + ' pr-1'}
                      iconName="jiantou"
                    ></AigcIcon>

                    <div className="w-full text-jutify ">{item.inPut}</div>
                    <div className="w-full text-jutify ">{item.outPut}</div>
                    <div className="w-full text-end">{item.createDate}</div>
                  </div>
                )}
              ></List>
            </ReactSeamlessScroll>
          </Fragment>
        </Card>
      </div>
    </>
  )
}
